import React from 'react';
import { View, StyleSheet, Animated, ListRenderItemInfo } from 'react-native';
import { RootState } from '@/models/index';
import { connect, ConnectedProps } from 'react-redux';
import { ITabProps } from '../Tab';
import { NativeViewGestureHandler } from 'react-native-gesture-handler';
import { IProgram } from '@/models/album';
import Item from './Item'

const mapStateToProps = ({ album }: RootState) => {
    return {
        list: album.list,
    };
};

const connector = connect(mapStateToProps);

type ModelState = ConnectedProps<typeof connector>;

type IProps = ModelState & ITabProps;

function List(props: IProps) {
    const { list, panRef, tapRef, nativeRef, onScrollDrag } = props;
    const onPress = (data: IProgram, index: number) => {
        const { onItemPress } = props;
        onItemPress(data, index);
    };
    const renderItem = ({ item, index }: ListRenderItemInfo<IProgram>) => {
        return <Item data={item} index={index} onPress={onPress} />;
    };
    const keyExtractor = (item: IProgram) => item.id;
    return <NativeViewGestureHandler simultaneousHandlers={panRef} ref={nativeRef} waitFor={tapRef}>
        <Animated.FlatList
            style={styles.container}
            data={list}
            bounces={false}
            renderItem={renderItem}
            keyExtractor={keyExtractor}
            onScrollBeginDrag={onScrollDrag}
            onScrollEndDrag={onScrollDrag}
        />
    </NativeViewGestureHandler>
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
    }
})
export default connector(List)